<template>
  <view class="box">
    <view class="icon" v-if="badgeList.length > 0" v-for="(item,index) in badgeList">
		<image class="icon-image" mode="aspectFill" :src="item.imageUrl"></image>
		<view class="icon-title" :style="{color:item.color}">{{item.name}}</view>
	</view>
  </view>
</template>

<script>
	
import { getConfigInfo,badge } from '@/api/system/pubulic'
  export default {
    data() {
      return {
        params: {},
        badgeList:[]
      }
    },
    props: {
      src: {
        type: [String],
        default: null
      }
    },
    onLoad(event) {
		badge({pageSize:100}).then((res)=>{
			this.badgeList = res.data
		})
    }
  }
</script>
<style lang="scss" scoped>
	.box{
		display: flex;
		flex-wrap: wrap;
	}
	.icon{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.3%;
		.icon-image{
			width: 200rpx;
			height: 200rpx;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}
		.icon-title{
			font-weight: 400;
			font-size: 28rpx;
		}
	}
</style>
